<template>
  <div class="app-container" style="padding:0px;">
    <div id="sitemap" class="mapH" style="width: 100%;height: 400px;"></div>
  </div>
</template>

<script>
  import { MP } from "@/api/tool/map.js";

  export default {
    name: 'PointWz',
    props: ["longitude","latitude"],
    data() {
      return {
        ak:'PBN22I5Vj9bmNHV47jqkKwiezrwlU3jF',
      }
    },
    watch: {
      longitude(){
        this.$nextTick(() => {
          const _this = this
          MP(_this.ak).then(BMap => {
            _this.initMap();
          })
        });
      }
    },
    created() {
      this.$nextTick(() => {
        const _this = this
        MP(_this.ak).then(BMap => {
          _this.initMap();
        })
      });
    },
    methods: {
      initMap(){
        let _this=this;
        let point = new BMap.Point(_this.longitude, _this.latitude);
        let sitePng = require('@/assets/image/mark_green.png');
        let marker=new BMap.Marker(point,{icon:new BMap.Icon(sitePng, new BMap.Size(34, 50), {
            offset: new BMap.Size(17, 25)
          })
        });
        this.map = new BMap.Map("sitemap",{enableMapClick: false});
        this.map.centerAndZoom(point,10);
        this.map.enableScrollWheelZoom();
        this.map.addControl(new BMap.OverviewMapControl());
        this.map.addControl(new BMap.ScaleControl());
        this.map.addOverlay(marker);

        this.map.setMapStyle({
          styleJson:[{"featureType":"subway","elementType":"all","stylers":{"visibility":"off"}},{"featureType":"railway","elementType":"all","stylers":{"visibility":"off"}},{"featureType":"airportlabel","elementType":"all","stylers":{"visibility":"off"}},{"featureType":"scenicspotslabel","elementType":"all","stylers":{"visibility":"off"}},{"featureType":"educationlabel","elementType":"all","stylers":{"visibility":"off"}},{"featureType":"medicallabel","elementType":"all","stylers":{"visibility":"off"}},		{"featureType":"subwaystation","elementType":"all","stylers":{"visibility":"off"}}]
        });

      },
    }
  }
</script>
<style>
  /**<!-- 隐藏地图logo -->**/
  .anchorBL{display:none}
</style>
